<template name="live_list">
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">我的预约</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav " scroll-with-animation :scroll-left="scrollLeft">
			<view class="flex text-center">
				<view data-id="1" class="cu-item flex-sub" :class="1==type?'text-orange cur':''" @tap="tabSelect">即将开播</view>
				<view data-id="2" class="cu-item flex-sub" :class="2==type?'text-orange cur':''" @tap="tabSelect">精彩回播</view>
			</view>
		</scroll-view>
		<view class="list-content">
			<block v-for="(live, i) in list" :key="i">
				<liveView :value="live"></liveView>
			</block>

			<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
		</view>
	</view>
</template>

<script>
	import liveView from '@/components/college/liveView.vue'
	export default {
		name: "live_list",
		components: {
			liveView,
		},
		data() {
			return {
				type: 1,
				sub_class: 1,
				scrollLeft: 0,
				list: [],
				page: 1,
				hasMore: true,
				loading: false,
			}
		},
		onLoad(options) {
			this.getList()
		},
		onShow() {},
		methods: {
			tabSelect(e) {
				if (this.type != e.currentTarget.dataset.id) {
					this.type = e.currentTarget.dataset.id
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.page = 1
					this.hasMore = true
					this.list = []
					this.getList()
				}
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					this.$http
						.get('subscribe', {
							page: this.page,
							type: this.type,
						})
						.then((response) => {
							// console.log(response.data.data)
							let list = this.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							console.log(this.list)
						})
						.catch((response) => {
							console.log(response)
							this.loading = false
						})
				}
			},
			goLiveDetail(live) {
				if (live.type == 1) {
					this.$common.setCache('live-detail', live)
					uni.navigateTo({
						url: '/collegePackages/pages/college/live_view?id=' + live.id
					})
				} else if (live.type == 2) {
					// #ifdef MP-WEIXIN
					let url = this.$http.host() + "/h5/#" + "/collegePackages/pages/college/video_detail?id=" + live.id + "&token=" + uni.getStorageSync(
						'token')
					console.log(url)
					this.$common.setCache('webview_url', url, 10 * 60)
					uni.navigateTo({
						url: "/pages/site/webview"
					})
					// #endif 

					// #ifdef H5
					this.$common.setCache('video-detail', live)
					uni.navigateTo({
						url: '/collegePackages/pages/college/video_detail?id=' + live.id
					})
					// #endif 
				}
			},
		},
		onPullDownRefresh() {},
		onReachBottom() {
			this.getList()
		},
	}
</script>

<style>
	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.list-content {
		width: 100%;
	}

	.list-view {
		margin: 30rpx;
	}

	.list-view .item {
		width: 100%;
		border-radius: 15rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.list-view .item .thumb {
		width: 100%;
		height: 380rpx;
		background-color: #EEE;
		overflow: hidden;
		position: relative;
	}

	.list-view .item .thumb .cover {
		width: 100%;
		height: 100%;
	}

	.list-view .item .thumb .tag {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		background-color: rgb(0, 0, 0, 0.5);
		font-size: 22rpx;
		display: flex;
		padding: 10rpx 25rpx;
		border-radius: 30rpx;
		align-items: center;
	}

	.list-view .item .thumb .tag .ico {
		width: 26rpx;
		height: 22rpx;
		margin-left: 5rpx;
	}

	.list-view .item .title {
		margin: 30rpx;
		border-bottom: 1px solid #EEE;
		padding-bottom: 10rpx;
	}

	.list-view .item .title .tt {
		width: 100%;
		max-height: 96rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		overflow: hidden;
		color: rgba(251, 178, 64, 1);
	}

	.list-view .item .title .gobtn {
		min-width: 50rpx;
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}

	.list-view .item .bottom {
		margin: 0 30rpx 30rpx;
	}

	.list-view .item .bottom .teacher {
		height: 30rpx;
		line-height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* font-size: 28rpx; */
		width: 100%;
	}

	.list-view .item .bottom .time {
		width: 420rpx;
		min-width: 420rpx;
		height: 30rpx;
		line-height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
		marign-left: 10rpx;
	}
</style>
